<template>
  <div class="dataStatistics">
    <!-- 中国地图的容器 -->
    <div id="China_map" style="height: 600px"></div>
    <!-- 内蒙古自治区的容器 -->
    <div id="Neimenggu_map"></div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      // 中国疫情数据
      chinaCovidData: [],
      neimengguCovidData: [],
    };
  },
  // 一般情况下，图表类的生成方式都是在mountend生命周期中去进行
  //
  mounted() {
    // 自动获取中国疫情相关英文created生命周期知识完成了data和methods的初始化，并没有完成DOM的加载的数据
    this.getChinaCovidData();
  },
  methods: {
    // 获取中国疫情相关的数据
    getChinaCovidData() {
      axios({
        url: "https://api.muxiaoguo.cn/api/epidemic?type=epidemicInfectionData&api_key=6f46fea09e825b0b",
      }).then((res) => {
        // console.log(res.data.data);
        // JS 数组API map
        this.chinaCovidData = res.data.data.map((item) => {
          return {
            name: item.provinceShortName,
            value: item.currentConfirmedCount,
          };
        });
        // 自动加载中国地图
        this.loadChinaMap();

        // 筛选广西壮族自治区的数据
        // 过滤去广西的数据 filter
        let neimengguRes = res.data.data.filter((item) => {
          return item.provinceName == "内蒙古自治区";
        });
        console.log(neimengguRes[0].cities);
        // 再将内蒙古的数据转换成我们想要的数据格式
        this.neimengguCovidData = neimengguRes[0].cities.map((item) => {
          return {
            name: item.cityName,
            value: item.currentConfirmedCount,
          };
        });
        // 自动加载内蒙古地图
        this.loadNeimengguMap();
        //      console.log(this.guangxiCovidData);
      });
    },
    // 加载中国地图
    loadChinaMap() {
      // 初始化图表
      new Highcharts.Map("China_map", {
        title: {
          text: "各省市现有疫情确诊情况",
        },
        // 颜色轴
        colorAxis: {
          // 分区间进行色块的处理
          dataClasses: [
            {
              // 对应区间的颜色
              color: "rgb(233,240,247)",
              // 从哪开始
              from: 0,
            },
            {
              // 对应区间的颜色
              color: "rgb(255,244,239)",
              // 从哪开始
              from: 1,
              // 到哪结束
              to: 9,
            },
            {
              // 对应区间的颜色
              color: "rgb(255,231,221)",
              // 从哪开始
              from: 10,
              // 到哪结束
              to: 99,
            },
            {
              // 对应区间的颜色
              color: "rgb(253,177,155)",
              // 从哪开始
              from: 100,
              // 到哪结束
              to: 499,
            },
            {
              // 对应区间的颜色
              color: "rgb(231,133,109)",
              // 从哪开始
              from: 500,
              // 到哪结束
              to: 999,
            },
            {
              // 对应区间的颜色
              color: "rgb(222,81,47)",
              // 从哪开始
              from: 1000,
              to: 9999,
            },
            {
              color: "rgb(151,10,15)",
              from: 10000,
            },
          ],
        },

        series: [
          {
            data: this.chinaCovidData,
            name: "现存数量",
            mapData: Highcharts.maps["cn/china"],
            joinBy: "name", // 根据 name 属性进行关联
          },
        ],
        // 地图的一些导航相关配置
        mapNavigation: {
          enableButtons: true, // 是否启用缩放按钮
        },
      });
    },

    loadNeimengguMap() {
      // 初始化图表
      new Highcharts.Map("Neimenggu_map", {
        title: {
          text: "内蒙古自治区疫情确诊情况",
        },
        colorAxis: {
          min: 0,
          minColor: "rgb(255,255,255)",
          maxColor: "rgb(151,10,15)",
        },
        series: [
          {
            data: this.neimengguCovidData,
            name: "随机数据",
            mapData: Highcharts.maps["cn/neimenggu"],
            joinBy: "name", // 根据 name 属性进行关联
          },
        ],
      });
    },
  },
};
</script>

<style scoped>
</style>